<script setup lang="ts">
import {reactive, ref} from "vue";
import {useAuthenticationStore} from "@renderer/store/authentication";
import Container from "@renderer/components/Container.vue";

const authenticationStore = useAuthenticationStore()

const formRef = ref<HTMLFormElement | null>(null);
const formData = reactive({
  username: 'admin',
  password: 'admin'
})
const rules = reactive({
  username: [
    {
      required: true,
      message: '请输入账号'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ]
})

const doLogin = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      authenticationStore.login(formData)
    }
  });
}
</script>

<template>
<Container>
  <div class="layout">
    <div class="layout-left">
      <div class="layout-left-background"></div>
    </div>
    <div class="layout-right">
      <n-form ref="formRef" :model="formData" :rules="rules">
        <n-form-item path="username" label="账号">
          <n-input v-model:value="formData.username" placeholder="请输入密码" />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
              v-model:value="formData.password"
              type="password"
              placeholder="请输入密码"
          />
        </n-form-item>
        <n-form-item>
          <n-button type="primary" class="login-btn" @click="doLogin">立即登录</n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</Container>
</template>

<style scoped lang="less">
.layout{
  height: 250px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  div{
    flex: 1;
  }
  .layout-left{
    height: 100%;
    user-select: none;
    -webkit-app-region: drag;
    .layout-left-background{
      margin-right: 30px;
      border-radius: 8px;
      overflow: hidden;
      height: 100%;
      background-image: url("@renderer/assets/images/login/login_01.png");
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  .layout-right{
    .login-btn{
      width: 100%;
    }
  }
}
</style>
